<template>
  <div class="flex flex-row">
  <div class="menu">
    <div class="title flex a-item j-content">
      历史报表
    </div>
    <div v-for="(item,index) in profitStatementList" :style="{color:item.showName === profitStatementTemplateData.busDate?'blue':''}" @click="setProfitStatement(item)" class="date flex a-item j-content">{{ item.showName }}</div>
  </div>
    <div class="reportBox">
    <div class="flex flex-row" style="margin-bottom: 20px">
      <div class="block">
        <el-date-picker
          v-model="query.month"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
      </div>
      <el-button typt="success" @click="get">查询</el-button>
      <el-button typt="success" @click="recalculation(profitStatementTemplateData.busDate)">重新计算</el-button>
    </div>
    <div v-loading="showTable">
    <div class="title flex a-item j-content">利润表</div>
    <br />
      <div style="width: 100%" class="flex flex-row">
        <div class="fl1">编制单位:{{ profitStatementTemplateData.companyName }}</div>
        <div class="fl1">年 月</div>
        <div class="fl1">单位:元</div>
      </div>
      <div class="content">
        <div class="flex flex-row">
          <div class="td fl2 flex a-item j-content">项目</div>
          <div class="td fl1 flex a-item j-content">行次</div>
          <div class="td fl1 flex a-item j-content">本期数</div>
          <div class="td fl1 flex a-item j-content">本年累计数</div>
        </div>
        <profit-statement-row  v-for="item in profitStatementTemplateData.rowDataList" :row-data="item" :no="1"></profit-statement-row>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { basSubjectIncurredAmount } from '@/api/erp/basSubject'
import { webProperties, getWebProperties } from '@/api/data'
import profitStatementRow from './componet/profitStatementRow'
export default {
  name: 'profitStatement',
  data(){
    return{
      profitStatementTemplateData:{},
      showTable: false,
      query:{
        month:''
      },
      monthList:[],
      profitStatementList:[]
    }
  },
  created() {
    webProperties({key: 'profitStatementTemplate'}).then(res=>{this.profitStatementTemplateData = JSON.parse(res.data.value)})
    this.getHistory()
  },

  components: { profitStatementRow },
  methods:{
    get(){
      if(!this.query.month){
        this.$message.error('请先选择日期')
        return
      }
      const data = this.profitStatementList.find(item=>item.showName === this.query.month)
      if (data){
        this.setProfitStatement(data)
      }else {
         this.recalculation(this.query.month).then(res=>{
         this.getHistory()
       })
      }
    },

    setProfitStatement(e){
      this.profitStatementTemplateData = JSON.parse(e.value)
    },
    async getHistory(){
      const res = await getWebProperties({keyword:'profitStatement-'}).catch(e=>{
        console.log(e)
      })
      this.profitStatementList = res.data.content
      this.profitStatementList.forEach(item=>{
        item.showName = item.key.match(/\d{4}\-\d{2}/)[0]
      })
      //排序
      this.profitStatementList.sort((a,b)=>Number(b.showName.split('-').join('')) - Number(a.showName.split('-').join('')))
    },
    async recalculation(month){
      if(!month){
        this.$message.error('请先选择日期')
        return
      }
      this.showTable = true
      const res = await basSubjectIncurredAmount({month}).catch((err) => { this.showTable = false });
      this.showTable = false
      this.profitStatementTemplateData = res.data
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.reportBox{
  margin: 100px 20% 0 20%;
  width: 60%;
  min-height: 500px;
  min-width: 500px;
  .title{
    color: #ffffff;
    background-color: #1F4E78;
    height: 60px;
    font-size: 40px;
  }
  .content{
    .title{

    }
  }
}
.td{
  border: 1px solid #000000;

  height: 30px;
}
.menu{
  min-width: 200px;
  height: 800px;
  overflow: auto;
  box-shadow: 0 0 5px 1px rgb(203,203,203);
  .title{
    font-size: 20px;
    height: 40px;
    background-color: #0882d6;
    color: #ffffff;
  }
  .date{
    height: 35px;
    font-size: 15px;
    border-bottom: rgba(203,203,203,0.6) 1px solid;
    cursor: pointer;
    &:hover{
      background-color: #bdd7ee;
    }
  }
}
</style>
